<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增楼宇')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-building-add">
        <!--楼宇栋数-->
        <fieldset>
            <legend>所属场所信息</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所属社区：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="sqName" onclick="selectDeptTree()" id="sqName" autocomplete="off" type="text"
                               placeholder="请选择所属社区"
                               class="form-control" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>

                    </div>
                </div>
                <input type="hidden" name="sqCode" id="sqCode">
                <script type="text/javascript">
                    /* 用户管理-新增-选择部门树 */
                    function selectDeptTree() {
                        var treeId = $("#treeId").val();
                        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
                        var url = ctx + "system/dept/selectDeptTree/" + deptId;
                        var options = {
                            title: '选择部门',
                            width: "380",
                            url: url,
                            callBack: doSubmit
                        };
                        $.modal.openOptions(options);
                    }

                    function doSubmit(index, layero) {
                        var tree = layero.find("iframe")[0].contentWindow.$._tree;
                        if ($.tree.notAllowParents(tree)) {
                            var body = layer.getChildFrame('body', index);
                            $("#sqCode").val(body.find('#treeId').val());
                            $("#sqName").val(body.find('#treeName').val());
                            layer.close(index);
                            continueWrite();
                        }
                    }
                </script>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所属场所类型：</label>
                <div class="col-sm-8">
                    <select onchange="continueWrite()" name="sscsLx" class="form-control m-b" th:with="type=${@dict.getType('b_zzslx')}" required>
                        <option value="">未选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所属场所名称：</label>
                <div class="col-sm-8">
                    <input onchange="continueWrite()" name="sscsMc" placeholder="酒店、小区、学校名称" class="form-control" type="text" required>
                </div>
            </div>


        </fieldset>
        <fieldset id="mbwz">
            <legend>楼宇信息</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">楼号：</label>
                <div class="col-sm-8">
                    <input readonly="true" name="lh" placeholder="如果只有一栋楼请填1" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group" style="display: none;">
                <label class="col-sm-3 control-label">每栋拥有单元数：</label>
                <div class="col-sm-8">
                    <input  name="dys"  min="1" max="254" digits="true" title="只能输入1-254之间的正整数"  class="form-control" type="text" value="1">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">总层数：</label>
                <div class="col-sm-8">
                    <input name="cs" readonly="true" placeholder="填写可供管辖的总层数" min="1" max="254" digits="true" title="只能输入1-254之间的正整数"  class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">每层拥有户数：</label>
                <div class="col-sm-8">
                    <input name="hs" readonly="true" placeholder="每层拥有几个房间或几户" min="1" max="254" digits="true" title="只能输入1-254之间的正整数" class="form-control" type="text" required>
                </div>
            </div>

        </fieldset>
        <!--<button type="button" id="tjly">添加楼宇</button>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "place/building"

    $("#form-building-add").validate({
        focusCleanup: true,
        rules:{
            lh:{
                min:1,
                max:254,
                remote: {
                    url: prefix + "/checkunique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "lh": function() {
                            return $.common.trim($("input[name=lh]").val());
                        },
                        "sscsMc":function () {
                            return $.common.trim($("input[name=sscsMc]").val());
                        },
                        "sqCode":function () {
                            return $.common.trim($("input[name=sqCode]").val());
                        },
                        "sscsLx":function () {
                            return $.common.trim($("select[name=sscsLx]").find("option:selected").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            }
        },
        messages:{
            lh:"只能输入1-254之间的正整数,且与现有楼号不能重复"
        }
    });

    /**
     * 判断能否继续填写，场所信息填写完整之前不能填写楼宇信息
     */
    function continueWrite(){
        var sscsLx=$("select[name=sscsLx]").find("option:selected").val();
        var sscsMc=$("input[name=sscsMc]").val();
        var sqCode=$("input[name=sqCode]").val();
        if(sscsLx!=""&&sscsMc!=""&&sqCode!=""){
            $("input[name=lh]").add("input[name=cs]").add("input[name=hs]").attr("readonly",false);
        }else{
            $("input[name=lh]").add("input[name=cs]").add("input[name=hs]").attr("readonly",true);
        }

    }
    function submitHandler() {
        /*if ($.validate.form()) {
            var lyList=[];
            var sscsLx=$("select[name=sscsLx]").find("option:selected").val();
            var sscsMc=$("input[name=sscsMc]").val();
            var sqCode=$("input[name=sqCode]").val();

            $.each($("div.lygt"),function (i,n) {
                var lyObj={};
                lyObj.sscsLx=sscsLx;
                lyObj.sscsMc=sscsMc;
                lyObj.sqCode=sqCode;
                lyObj.lh=$(n).find("input[name=lh]").val();
                lyObj.dys=$(n).find("input[name=dys]").val();
                lyObj.cs=$(n).find("input[name=cs]").val();
                lyObj.hs=$(n).find("input[name=hs]").val();
                lyList.push(lyObj);
            })
            console.log(JSON.stringify(lyList));

            $.ajax({
                type:"post",
                url:prefix + "/addlist",
                data:JSON.stringify(lyList),
                contentType: 'application/json',
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                    $.modal.disable();
                },
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successCallback(result);
                }
            });*/
        if($.validate.form()){
            $.operate.save(prefix + "/add", $('#form-building-add').serialize());
        }
    }

    /*$("#tjly").click(function () {
        var templateText=$("#lymb").get(0).innerHTML
        var lyds=parseInt($("#lyds").val())+1;
        $("#lyds").val(lyds);
        while (templateText.indexOf("_num_")>0){
            templateText=templateText.replace("_num_",lyds);
        }
        $("#mbwz").append($(templateText));
    })*/
    /*function removeLy(n) {
        $(n).closest("div.lygt").remove();
    }*/
</script>
</body>
</html>
<!--楼宇模板-->
<!--
<template id="lymb">
    <div class="lygt" style="border: #CCCCCC solid 1px;">
        <h4><a href="javascript:void(0);" class="" onclick="removeLy(this)">移除该楼宇&nbsp;×</a></h4>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">楼号：</label>
            <div class="col-sm-8">
                <input name="lh"  min="1" max="254" digits="true" checkLh="true" title="只能输入1-254之间的正整数,且楼号不能重复"  class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group" style="display: none;">
            <label class="col-sm-3 control-label">每栋拥有单元数：</label>
            <div class="col-sm-8">
                <input name="dys"  min="1" max="254" digits="true" title="只能输入1-254之间的正整数"  class="form-control" type="text" value="1">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">总层数：</label>
            <div class="col-sm-8">
                <input name="cs"  min="1" max="254" digits="true" title="只能输入1-254之间的正整数"  class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">每层拥有户数：</label>
            <div class="col-sm-8">
                <input name="hs"  min="1" max="254" digits="true" title="只能输入1-254之间的正整数"  class="form-control" type="text" required>
            </div>
        </div>
    </div>
</template>-->
